<!--
mc-col-config:{type:'checkbox',options:[{k:'',v:''}]}
              type:
                  checkbox
                  select
                  radio
                  boolean
                  api:远程接口 url:'数据地址' method:'post'|'get'
废弃
-->

<template>
   <vxe-table-column v-bind="$attrs" v-on="$listeners">
       <!--
       <template #edit="{ row }">
            <vxe-input type="text" v-model="row[field]"></vxe-input>
       </template>
       -->
      <template #default="{ row }">
          <!-- remoteOptions跟首次加载后绑定 -->
          <span v-if="remoteOptions.length>0" >
              {{renderText(row[field])}}
          </span>
          <span v-else>
              {{renderText(row[field])}}
          </span>
      </template>
   </vxe-table-column>
</template>

<script>
export default {
  name: 'mc-vxe-table-column',
  props: ['field','mcColConfig'],
  /*如果父模板的edit-type disabled发生变化 就会重绘此组件*/
  computed:{

  },
  watch:{
  },
  data () {
    return {
        remoteOptions:[]
    }
  },
  methods:{
        renderText:function(value){
            if(typeof value!=='undefined' && value!=='' && value!==null && this.mcColConfig){
                  var type = this.mcColConfig.type;
                  switch(type){
                      case 'select':
                      case 'checkbox':
                      case 'radio':
                      case 'boolean':
                      case 'api':
                          var options = this.mcColConfig.options || this.remoteOptions;
                          if(options){
                              var kv = {};
                              for(var i=0;i<options.length;i++){
                                  var option = options[i];
                                  var k = option.k;
                                  var v = option.v;
                                  kv[k] = v;
                              }
                              var arr = (value+"").split(",");
                              for(var i=0;i<arr.length;i++){
                                  var k = arr[i];
                                  if(typeof kv[k] != 'undefined'){
                                      arr[i] = kv[k];
                                  }
                              }
                              return arr.join(",");
                          }
                  }
            }
            return value;
        }
  },
  mounted () {
        var request = this.$magicaltool.request;
        var _t = this;
        if(this.mcColConfig){
            var type = this.mcColConfig.type;
            if(type == 'api' && this.mcColConfig.url){
                  request.axios({cache:true,$vue:this,url:this.mcColConfig.url,method:"get"}).then(function(res){
                    var data = res.data;
                      if(data.code == 0 ){
                          _t.remoteOptions = data.data || [];
                      }
                   })
            }
        }

  }
}
</script>

<style lang="scss">

</style>
